<template>
	<view class="mark-up">
		<text class="remarks">注：快捷改价只适用于提高工价，不能降低工</text>
		<view class="price">
			<text>修改工价</text>
			<number-box v-model="numbeBoxData" :company="company" @money="money"></number-box>
		</view>
		<view class="task-time">修改任务时间</view>
		<view class="task-date">
			<text>任务日期</text>
			<view class="task-date-time">
				<view class="not-day" :class="{'already-day':timeFlag == 0}" @click="timeFlag = 0"></view>
				<text style="margin-right: 30rpx;">今天</text>
				<view class="not-day" :class="{'already-day':timeFlag == 1}" @click="timeFlag = 1"></view>
				<text>明天</text>
			</view>
		</view>
		<view class="task-date">
			<text>任务时间</text>
			<view @click="isShowTimeSelect=true" style="flex: 1;display: flex;justify-content: flex-end;align-items: center;">
				<text style="margin-right: 20rpx;">{{ task.startTime.substring(10,16)+ " -" + task.endTime.substring(10,16) }}</text>
				<u-icon name="arrow-right" color="rgba(34, 34, 34, 0.25)" size="28"></u-icon>
			</view>
		</view>
		<view class="foot">
			<view class="foot-left" @click="goToPage">取消</view>
			<view class="foot-right" @click="easyPriceUpon">确认</view>
		</view>
		<timeSelect v-if="isShowTimeSelect" @close="isShowTimeSelect=false" :timeFlag="timeFlag"
			@getTaskTime="getTaskTime"></timeSelect>
		<openAlert ref="openAlert" :shadeClose="false" :BgColor="1"  :closeBtn="false" :AlertClass="0" :AlertPosition="''" 
		:CustomPosition="{ bottom:'40%' }">
			<view class="stips-box">
				<image src="../../static/jia-jia.png" mode="widthFix"></image>
			</view>
		</openAlert>	
			
	</view>
</template>

<script>
	import timeSelect from '@/components/time-select/time-select.vue'
	import openAlert from '@/components/open-alert/open-alert.vue'
	export default {
		data() {
			return {
				numbeBoxData:'',//修改金额
				reward:'',//初始金额
				timeFlag: 0, // 0 今天 1明天
				isShowTimeSelect:false,
				company:'',
				task:{
					taskId:'',
					startTime:'',
					endTime:'',
					price:''
				}
			}
		},
		onLoad({id,taskStatus,reward,taskType,startTime,endTime}) {
			let date = new Date();
			var day = date.getDate();
			if (day == startTime.substring(8,10)) {
				this.timeFlag = 0;
			} else {
				this.timeFlag = 1;
			}
			this.company = taskType;
			this.task.taskId = parseInt(id);
			this.numbeBoxData = parseFloat(reward);
			this.reward = parseFloat(reward);
			this.task.startTime = startTime;
			this.task.endTime = endTime;
			
		},
		
		components: {
			timeSelect,
			openAlert
		},
		methods: {
			goToPage(){
				uni.navigateBack();
			},
			//接收任务时间
			getTaskTime(timeList) {
				console.log(11,timeList);
				// this.task.startTime = timeList[0].substring(10,16);
				// this.task.endTime = timeList[1].substring(10,16);
				
				this.task.startTime = timeList[0];
				this.task.endTime = timeList[1];
				
				this.isShowTimeSelect = false
			},
			money(price){
				this.task.price = price;
			},
			async easyPriceUpon(){
				let tempEndTime = new Date(this.task.startTime.replace(/-/g,'/')).getTime()
				let tempNowTime = new Date().getTime()
				if(tempNowTime>tempEndTime){
					this.$nextTick(function() {
						this.$refs.openAlert.Show(0);
					});
					
					setTimeout(()=>{
						this.$refs.openAlert.Close(17);
					},1600)
					return
				}
				
				if (this.task.price <= this.reward) return uni.showToast({icon: 'none',title: '不能低于或等于初始金额~'});
				let easyData = {
					'startTime':this.task.startTime,
					'endTime':this.task.endTime,
					'taskId':this.task.taskId,
					'price':this.task.price
				}
				console.log(easyData);
				let res = await this.$fetch(this.$api.easyPriceUpon, easyData , 'GET')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				uni.showToast({ title: res.msg, icon: 'none' })
				let timer = setTimeout(() => {
					clearTimeout(timer);
					timer = null;
					uni.navigateBack();
				}, 500);
			}
		}
	}
</script>
<style>
	page{
		background: #fff;
	}
</style>

<style lang="less" scoped>
	.mark-up {
		padding: 24rpx 30rpx;
		.stips-box{
			width: 750rpx;
			// height: 400rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// border: 1px solid;
			image{
				width: 380rpx;
				height: 100%;
			}
			// background: #ccc;
		}
		
		
		.remarks {
			font-size: 24rpx;
			color: rgba(64, 33, 16, 0.5);
		}
		.price {
			margin-top: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			& > text {
				font-size: 30rpx;
				font-weight: bolder;
				color: #402110;
			}
		}
		.task-time{
			margin-top: 50rpx;
			font-size: 30rpx;
			font-weight: bolder;
			color: #402110;
		}
		.task-date{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			& > text {
				font-size: 28rpx;
				color: #402110;
			}
			&-time{
				display: flex;
				align-items: center;
				& > .not-day{
					width: 36rpx;
					height: 36rpx;
					border: 2rpx solid rgba(64, 33, 16, 0.3);
					border-radius: 50%;
					margin-right: 16rpx;
				}
				& > .already-day{
					border: 2rpx solid #F39B19;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				& > .already-day::after{
					content: '';
					width: 24rpx;
					height: 24rpx;
					background: #F39B19;
					border-radius: 50%;
				}
			}
		}
		.foot {
			position: fixed;
			bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			& > view {
				width: 334rpx;
				height: 96rpx;
				border-radius: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.foot-left{
				border: 2rpx solid #9F9087;
				font-size: 28rpx;
				font-weight: bold;
				color: rgba(64, 33, 16, 0.5);
				margin-right: 20rpx;
			}
			.foot-right{
				background: #F39B19;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>
